<template>
  <BasePage padding-x="0px">
    <MyCards :get-data="testRecordApi.list" :query-schemas="querySchemas">
      <template #handle>
        <n-upload
          class="w-auto"
          accept=".json"
          :custom-request="methods.handleImport"
          :show-file-list="false"
        >
          <n-button>
            <template #icon>
              <img :src="appStore.rollbackImg" />
            </template>
            导入
          </n-button>
        </n-upload>
        <n-button color="#6D61E3" @click="router.push('/test/detail')">
          <template #icon>
            <img src="@/assets/images/add.png" />
          </template>
          编写测试
        </n-button>
      </template>
      <template #card="item">
        <TestCard
          :info="item"
          :active="state.currentCard === item.id"
          @click="methods.selectCard(item)"
          @del="methods.handleDelete"
        />
      </template>
    </MyCards>
  </BasePage>
</template>
<script setup lang="jsx">
import * as testRecordApi from '@/api/testRecord'
import TestCard from './modules/TestCard.vue'
import { useAppStore } from '@/store'
defineOptions({
  name: 'TestPage',
})
const appStore = useAppStore()
const router = useRouter()
const query = reactive({
  name: null,
})
const querySchemas = [
  {
    field: 'name',
    component: 'NInput',
    componentProps: {
      placeholder: '请输入被测对象名称',
    },
  },
  {
    field: 'aaa',
    component: 'SelectInput',
    fieldFormat: 'SelectInput',
  },
]
const state = reactive({
  currentCard: null,
  list: [],
  loading: false,
  pages: 1,
  current: 1,
})
const methods = reactive({
  async getList() {
    state.loading = true
    const res = await testRecordApi.list({ current: state.current, size: 20, ...query })
    state.pages = Number(res.data.pages)
    if (state.current === 1) {
      state.list = res.data.records
    } else {
      state.list = state.list.concat(res.data.records)
    }
    state.loading = false
  },
  selectCard({ id }) {
    if (state.currentCard === id) {
      state.currentCard = null
    } else {
      state.currentCard = id
    }
  },
  onScroll(e) {
    const dom = e.target
    const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight
    if (scrollDistance == 0) {
      console.log('bottom')
      methods.handleScroll()
    }
  },
  handleScroll() {
    if (state.current <= state.pages - 1 && !state.loading) {
      state.current++
      methods.getList()
    }
  },
  handleEnter() {
    state.current = 1
    nextTick(() => {
      methods.getList()
    })
  },
  handleImport({ file: { file } }) {
    if (file.size > 2 ** 10 * 500) {
      $message.warning(`单个文件不能超过${500}kb!`)
      return false
    }
    let reader = new FileReader()
    reader.readAsText(file)
    reader.onload = (e) => {
      try {
        const res = JSON.parse(e.target.result)
        //console.log(res)
        router.push({ name: 'TestDetail', state: { importData: res } })
      } catch (error) {
        console.log(error)
        $message.error(`文件内容异常!`)
      }
    }
  },
  handleDelete() {
    state.current = 1
    nextTick(() => {
      methods.getList()
    })
  },
})

onBeforeMount(() => {
  methods.getList()
})
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  .label {
    font-weight: 500;
  }
  &.light {
    height: 100px;
    backdrop-filter: blur(10px) saturate(180%);
    padding-left: 20px;
    .label {
      font-size: 32px;
      color: #030712;
    }
  }
  &.deep {
    height: 54px;
    padding: 0 30px;
    .label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 24px;
      color: #4ddef4;
      &::before {
        content: '';
        display: block;
        width: 30px;
        height: 22px;
        background: url(@/assets/images/deep-title-icon.png);
      }
    }
  }
}
:deep(.n-spin-content) {
  height: 100%;
}
</style>
